<script setup lang="ts">
import { onMounted } from 'vue';
import { state } from './state';
import myApproveItem from '../components/my-approve-item.vue';
import { navigateTo, showLoading, getCurrentInstance } from '@tarojs/taro';
import { QUERY_APP_FLOW_PATH_RECORD_LIST } from '/@/api/modules/flow-path/flow-path';
/**
 * @description 当前路由信息
 */
const params = getCurrentInstance().router?.params as {
  /**
   * 审批id
   */
  id: string;
};

/**
 * @description 跳转到详情页面
 * @param item 点击的item项
 */
function jumpToDetailPage(item: FlowPathDto.RecordDto) {
  navigateTo({
    url: `/pages/my-approve/detail/index?id=${item.id}`,
  });
}

/**
 *@description 审批列表
 * @param page 当前页
 * @param pageSize -每页条数
 */
function queryList(page: number = 1, pageSize: number = 15) {
  if (!page && state.finished) return;
  state.loading = true;
  showLoading();
  QUERY_APP_FLOW_PATH_RECORD_LIST({
    comQuery: { page, pageSize },
    flowpathRecordDto: { id: params.id },
    myHandleStatus: '5',
  })
    .then((res) => {
      state.loading = false;
      if (
        state.activePage >=
        (res.comQuery?.pageCount ||
          (res.comQuery?.totalCount as number) / (res.comQuery?.pageSize as number) ||
          1)
      ) {
        state.finished = true;
      }
      if (!res.flowpathRecordDto || !res.flowpathRecordDto.length) return;
      state.list.push(...res.flowpathRecordDto);
      state.activePage += 1;
    })
    .catch(() => {
      state.loading = false;
    });
}

/**
 * @function 加载
 */
function onLoading() {
  if (state.finished) return;
  queryList(state.activePage);
}

/**
 * 列表刷新
 */
function refreshList() {
  state.activePage = 1;
  state.loading = true;
  state.finished = false;
  state.list = [];
  onLoading();
}

onMounted(() => {
  refreshList();
});
</script>

<template>
  <view class="my-approve-list app-page--1">
    <app-navbar title="历史记录" />
    <scroll-view
      class="app-page__wrapper"
      :scroll-y="true"
      :lower-threshold="100"
      @scrolltolower="onLoading()"
    >
      <view class="my-approve-list__wrapper">
        <my-approve-item
          :item="item"
          v-for="item in state.list"
          :key="item.id || ''"
          @click="jumpToDetailPage(item)"
        />
      </view>
      <view class="app-page__list-tips">
        <text v-if="!state.list.length">暂无数据！</text>
        <text v-else-if="state.list.length && state.loading">加载中...</text>
        <text v-else-if="state.list.length && state.finished">加载完成!</text>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
.my-approve-list {
  &__wrapper {
    padding: 0 20px;
  }
}
</style>
